<!-- 动态详情 -->
<template>
	<view>
		<view class="pageBox">
			<view class="topBox">
				<view class="status_bar"></view>
				<zdynav fromval="detail" :myavatar="pageData.avatar" :myname="pageData.u_name" :uid="pageData.uid">
				</zdynav>
			</view>
			<view class="centerBox">
				<scroll-view scroll-y="true" class="scrollStyle">
					<view>
						<swiper indicator-dots autoplay circular style="height:870rpx;">
							<swiper-item v-for="(item,index) in pageData.picture" :key="index">
								<image :src="item" mode="" class="img"></image>
							</swiper-item>
						</swiper>
						<view class="title">{{pageData.title}}</view>
						<view class="content">{{pageData.contents}}</view>
						<view class="dateAddress">发布于 {{pageData.create_time}} {{pageData.ip_city}}</view>
						<view class="pinglun">
							<view class="txt1">评论</view>
							<view class="txt2">（284）</view>
						</view>
						<view class="pinglunBox">
							<image src="" mode="" class="img"></image>
							<view class="ipt">发条友善评论吧~</view>
						</view>
						<pinglun></pinglun>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBox">
				<detailBottom :objdata="objdata"></detailBottom>
			</view>
		</view>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				prevPageData: '', //上个页面传的参数
				pageData: '', //当前页面数据
				objdata: {}, //传给子组件对象
			}
		},
		onLoad(option) {
			console.log(option);
			this.prevPageData = option;
			this.getDetailFn();
		},
		methods: {
			// 获取详情
			getDetailFn() {
				const obj = {
					id: this.prevPageData.id,
					uid:this.pageData.uid,
				}
				const _this = this;
				common.ajaxFn(api.index_detail, 'POST', obj).then((res) => {
					console.log('详情', res.data.data.trendsInfo);
					if (res) {
						_this.pageData = res.data.data.trendsInfo;
						_this.objdata = {
							type: 'image',
							likes_name: res.data.data.trendsInfo.likes_name,
							likes: res.data.data.trendsInfo.likes,
							collect_name: res.data.data.trendsInfo.collect_name,
							collect_num: res.data.data.trendsInfo.collect_num,
							comments_num: res.data.data.trendsInfo.comments_num
						}
					}
				});
			},
			// 去个人中心
			goPersonalCenter() {
				uni.navigateTo({
					url: `/pagesChat/userInfo?uid=${this.pageData.uid}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		display: grid;
		grid-template-rows: auto 1fr auto;

		.topBox {
			.status_bar {
				height: var(--status-bar-height);
				width: 100%;
			}
		}

		.centerBox {
			position: relative;

			.scrollStyle {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;

				.img {
					display: block;
					width: 100%;
					height: 100%;
				}

				.title {
					padding: 40rpx 30rpx 20rpx 30rpx;
					color: $gray-three;
					font-size: $font-sansi;
				}

				.content {
					width: 690rpx;
					margin: 0 auto;
					color: $gray-three;
					font-size: $font-sanshi;
				}

				.dateAddress {
					width: 690rpx;
					margin: 0 auto 30rpx;
					padding: 20rpx 0 30rpx 0;
					border-bottom: 1px solid #E9E9E9;
					color: $gray-nine;
					font-size: $font-ersi;
				}

				.pinglun {
					padding: 0 30rpx;
					display: flex;
					align-items: baseline;

					.txt1 {
						color: $gray-three;
						font-size: 44rpx;
						font-weight: bold;
					}

					.txt2 {
						color: $gray-six;
						font-size: $font-sanshi;
					}
				}

				.pinglunBox {
					padding: 20rpx 30rpx 40rpx 30rpx;
					display: grid;
					grid-template-columns: auto 1fr;
					column-gap: 20rpx;

					.img {
						display: block;
						width: 60rpx;
						height: 60rpx;
						background-color: red;
						border-radius: 50%;
					}

					.ipt {
						padding-left: 24rpx;
						height: 60rpx;
						background-color: #E9E9E9;
						border-radius: 30rpx;
						color: $gray-six;
						font-size: $font-erliu;
						line-height: 60rpx;
					}
				}
			}
		}

		.bottomBox {}
	}
</style>